<template>
  <BaseDialog
    ref="baseDialog"
    title="详情"
    @confrim="confrim"
    @cancel="close"
    width="400px"
  >
    <div class="container">
      <div class="detail" v-if="info">
        <div class="title">旧产品：(点击图片查看细节)</div>
        <div
          class="imgs"
          v-if="info.recycle.imgs && JSON.parse(info.recycle.imgs).length"
        >
          <el-image
            v-for="(el, index) in JSON.parse(info.recycle.imgs)"
            :key="index"
            style="width: 60px; height: 60px"
            :src="el"
            :preview-src-list="[el]"
            fit="cover"
          />
        </div>
        <div>品牌：{{ info.recycle.brand }}</div>
        <div>型号：{{ info.recycle.model }}</div>
        <div>类型：{{ info.recycle.cat }}</div>
        <div>成色：{{ info.recycle.newRate }}</div>
        <div>联系电话：{{ info.recycle.contact }}</div>
        <div>使用时间：{{ info.recycle.hasUsedTime }}</div>
        <div>功率：{{ info.recycle.power }}</div>
        <div>数量：{{ info.recycle.recycleNum }}个</div>
        <div>出厂时间：{{ info.recycle.dateFac }}</div>
        <div>补充说明：{{ info.recycle.note }}</div>
        <div>平台估价：{{ info.recycle.evalPrice }}￥</div>
        <div>应退差价：{{ info.recycleDtl.dltPrice }}￥</div>
        <div>应补差价：{{ info.recycleDtl.dlt2Platform }}￥</div>
        <div style="color: #409eff;">客户物流：{{ info.recycleDtl.clientExpress?JSON.parse(info.recycleDtl.clientExpress).no:'' }}_{{ info.recycleDtl.clientExpress?JSON.parse(info.recycleDtl.merExpress).company:'' }}</div>
        <div class="title" style="margin-top: 20px">
          换购产品
          <i class="el-icon-sort" style="color: #409eff"></i>
        </div>
        <div>
          <el-image
            style="width: 60px; height: 60px"
            :src="JSON.parse(info.recycleDtl.goodsInfo).coverUrl"
            :preview-src-list="[JSON.parse(info.recycleDtl.goodsInfo).coverUrl]"
            fit="cover"
          />
        </div>
        <div>产品名：{{ JSON.parse(info.recycleDtl.goodsInfo).name }}  {{JSON.parse(info.recycleDtl.goodsInfo).sellPrice }}￥*{{ info.recycleDtl.num }}</div>
        <div style="color: #409eff;">平台物流：{{ info.recycleDtl.merExpress?JSON.parse(info.recycleDtl.merExpress).no:'' }}_{{ info.recycleDtl.merExpress?JSON.parse(info.recycleDtl.merExpress).company:'' }}</div>
      </div>
    </div>
  </BaseDialog>
</template>

<script>
import _ from "lodash";
import { edit } from "@/api/menu";
import { Message } from "element-ui";
import { detail, evalOrder } from "@/api/es";
export default {
  data() {
    return {
      info: null,
    };
  },
  methods: {
    open(row) {
      this.$refs.baseDialog.open();
      this.initDeail(row);
    },
    async initDeail(row) {
      const res = await detail({ id: row.id });
      if (!res.status) {
        this.info = res.content;
      }
    },
    close() {
      this.$refs.baseDialog.close();
    },
    confrim() {
      this.$refs.baseDialog.close();
    },
    async submit(data) {},
    async edit(data) {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .detail {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    .title {
      font-weight: bold;
      margin-bottom: 20px;
    }
    .imgs {
      margin-bottom: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
}
</style>
